<template>
    <div>
        <el-card style="width: 700px;margin: auto;">
            <div slot="header" class="clearfix">
                <span>添加家乡风貌</span>
            </div>
            <el-form :model="ruleForm" label-width="120px">
                <el-form-item label="家乡风貌标题" prop="homeStyTitle">
                    <el-input v-model="ruleForm.homeStyTitle"></el-input>
                </el-form-item>
                <el-form-item label="发布人" prop="homeStyPrincipal">
                    <el-input v-model="ruleForm.homeStyPrincipal"></el-input>
                </el-form-item>
                <el-form-item label="发布来源">
                    <el-select v-model="ruleForm.homeStyFrom" clearable placeholder="请选择">
                        <el-option label="app" value="1"></el-option>
                        <el-option label="web" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="ruleForm.homeStyState" clearable placeholder="请选择">
                        <el-option label="已发布" value="1"></el-option>
                        <el-option label="未发布" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <div style="margin: auto;">
                    <el-form-item label="发布时间" prop="homeStyTime">
                        <el-col :span="11">
                            <el-date-picker type="datetime" placeholder="选择日期" v-model="ruleForm.homeStyTime"
                                value-format="yyyy-MM-dd HH:mm:ss" style="width: 585px;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                </div>
                <el-form-item label="项目概述" prop="homeStyInfo">
                    <el-input type="textarea" v-model="ruleForm.homeStyInfo"></el-input>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload action="http://localhost:8088/villageinvestment/user/addPic" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="checkCard">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addHomeStyle('ruleForm')">提交</el-button>
                    <el-button @click="$router.push('/HomeStyle')">返回</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogImageUrl: "",
            dialogVisible: "",
            ruleForm: {

            },
        }
    },
    methods: {
        qqq() {
            alert("qqq")
        },

        addHomeStyle() {

            var date = new Date(this.ruleForm.builtTime);
            var time3 = Date.parse(date);
            this.$axios
                .post("villageinvestment/home-style/addHomeStyle", this.ruleForm)
                .then(res => {
                    if (res.data.code == 20000) {
                        this.$router.push('/HomeStyle')
                    } else {
                        this.error = res.data.data.error
                        this.$message({
                            type: 'error',
                            message: this.error
                        })
                    }
                });
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
            console.log(file)
        }, handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        checkCard(file) {
            this.ruleForm.homeStyPhoto = file
            console.log(file)
        }
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>